<template lang="pug">
  .container.theme-app
    audio(:src="getBgMusicUrl", ref="bgAudio", preload)
    Loading(v-if="isShowLoading", @closeLoading='closeLoading')
    AerialGroup
    Introduction
    Intro
    .content
      .pano-wrap
        Pano
</template>

<script>
import mixinApp from '@/mixins/aerialPhotography'
import tplApp from '@/mixins/tpl-app'
export default {
  mixins: [mixinApp, tplApp],
  data() {
    return {
      isShow: false,
      bgMusicBtn: false,
    }
  },
  mounted() {

    // 自动播放背景音乐
    const audioRef = this.$refs.bgAudio
    this.$vgo.on('music:audoplay', () => {
      this.audioAutoPlay(audioRef)
    })
    // 针对部分机器切换背景音乐
    this.$vgo.on('music:toggle-play', () => {
      this.bgMusicBtn ? audioRef.pause() : audioRef.play()
      this.bgMusicBtn = !this.bgMusicBtn
    })
  },
  computed: {
    getBgMusicUrl() {
      return this.$store.getters.bgMusic
    },
  },
  methods: {
    audioAutoPlay(audio) {
      const play = () => {
        audio.play()
        document.removeEventListener('touchstart', play, false)
      }
      audio.play()
      this.bgMusicBtn = true
      document.addEventListener(
        'WeixinJSBridgeReady',
        function() {
          play()
        },
        false
      )
      document.addEventListener(
        'YixinJSBridgeReady',
        function() {
          play()
        },
        false
      )
      document.addEventListener('touchstart', play, false)
    },
  },
}
</script>

<style lang="stylus">
@import '../../assets/styles/app-theme.styl';

.container {
  height: 100vh;
}
</style>
